<template>
  <div>

    <div class="slider" ref="slider">
      <!--存放节点的容器-->
      <div class="slider-group" ref="sliderGroup">
        <slot name="meng" ref="videoScroll"></slot>
        <slot name="carousel">1111</slot>
      </div>
      <!--dot的容器-->
      <div class="dots">
            <span class="dot"
                  v-for="(item, index) in dots"
                  :key="index"
                  :class="{active:currentPageIndex === index}"
            ></span>
      </div>
    </div>
  </div>

</template>

<script>
    export default {
        name: "myCarousel",
        data(){
            return{
                //存放点的数量
                dots:[],
                // 在播放时点的索引与播放时图片的索引进行比较实现样式的改变
                currentPageIndex:0,
                timer:null,
                videoShow:true
            }
        },
        props:{
            // 是否无限循环播放
            loop:{
                type:Boolean,
                default:true
            },
            autoPlay:{
                type:Boolean,
                default:true
            },
            //间隔多少时间播放
            interval:{
                type:Number,
                default:2000
            }
        },
        mounted(){
          let _this = this;
          this.$refs.sliderGroup.children&&(this.children = this.$refs.sliderGroup.children);   //获取子节点
          let _video = this.$refs.sliderGroup.children[0];
          _video.nodeName === 'VIDEO' && (_video.onplay = function () {
            this.play();
          });
          if(this.children.length>1){
              this._setSliderWidth();
              this._initDots();
              this._initSlider();
          }
            //当调整浏览器窗口的大小时，发生 resize 事件。
            window.addEventListener('resize',()=>{
                if(!this.slider){  //resize还没有初始化时
                    return
                }
                this._setSliderWidth(true);
                this.slider.refresh(); // 宽度发生变化则重新计算
            })
        },
        methods:{
            _setSliderWidth(isResize){ //计算宽度
              this.$refs.sliderGroup.children&&(this.children = this.$refs.sliderGroup.children);   //获取子节点
                let _width = 0;
                let sliderWidth = this.$refs.slider.clientWidth; //网页可见区域宽
                for(let i=0; i<this.children.length; i++){
                    let child = this.children[i];
                    // this.$set(child,'slider-item');
                    child.style.width = sliderWidth + 'px';
                    _width += sliderWidth;
                }
                if(this.loop && !isResize){
                    _width += 2 * sliderWidth;
                }
                this.$refs.sliderGroup.style.width = _width + 'px';
            },
            _initDots(){
              this.children&&(this.dots = new Array(this.children.length)) //根据节点的长度生成一个数组
            },
            _initSlider(){ //初始化
              this.$refs.slider&&(this.slider = new this.$BSscroll(this.$refs.slider,{
                    scrollX:true,   //滚动方向
                    scrollY:false,
                    momentum:false,  //取消惯性滑动
                    snap:{
                        loop:this.loop,
                        threshold: 0.3, // 用手指滑动时页面可切换的阀值，大于这个阀值时可以滑动到下一页
                        speed:400 // 轮播图切换的动画时间
                    },
                    click:true  //派发click事件
                }));

                this.slider.on('scrollEnd', ()=> { // 派发scrollEnd事件,获取当前页currentPageIndex
                    let pageIndex = this.slider.getCurrentPage().pageX;  // 获取索引

                    this.currentPageIndex = pageIndex; // 赋值给当前currentPageIndex
                    /*if(this.autoPlay){
                      clearTimeout(this.timer);
                      this._play();
                    }*/
                });



            },
            _play(){
                clearTimeout(this.timer);
                this.timer = setTimeout(()=>{
                    this.slider.next();
                },this.interval)
            }
        }

    }
</script>

<style scoped>
    .slider{
        min-height :1px;
        position: relative;
    }

    .slider-group{
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        display: table-cell;
        vertical-align: middle;
    }
    .slider-group>img{
      width: 100%;
      height: 100%;
      margin: auto;
      overflow: hidden;
    }
    .slider-item{
          float:left;
          box-sizing :border-box;
          overflow :hidden;
          text-align: center;
      }
    .slider-group>img{
        width: 100vw;
        height: 700px;
    }
    .dots{
      position: absolute;
        left: 50%;
        bottom: -5%;
        transform: translate(-50%,-50%);
        text-align: center;
        font-size: 0;
      z-index: 9;
    }
    .dot{
        display: inline-block;
        margin: 0 4px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(0,0,0,.2);
    }

    .active{
        width: 32px;
        height: 18px;
        border-radius: 8px;
        background: #96d988;
     }
</style>
